<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card >
      <el-row :gutter="20">
        <!-- 中间间隔 -->
        <el-col :span="8">
          <!-- 用的是栅格式布局 -->
          <el-input clearable @clear="getUserList" v-model="queryData.query" placeholder="请输入内容" class="input-with-select">
            <!-- slot="append"内置的名字 定义图标在前面显示还是后面显示 -->
          <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <!-- :span 栅格占据的列数 -->
          <!-- 添加信息 ，给按钮注册了添加信息的页面-->
          <el-button @click="addDialogVisible = true" type="primary">添加信息</el-button>
          <!-- addDialogVisible = true让它等于true对话框才会显示，默认是false -->
        </el-col>
    </el-row>

    <!-- 表格 -->
    <!-- data:将整个表格数据交给table组件 -->
    <!-- border：添加纵向边框 -->
    <!-- stripe 各行换色 -->
    <!-- prop: 控制每一列渲染的数据字段名 -->
    <!-- 表格table组件 -->
      <el-table
        border
        stripe
        :data="users">
        <!-- type=index显示当前索引从数字1开始 -->
        <el-table-column type="index" label="#" width="50"></el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="role_name" label="角色"></el-table-column>
        <!-- 关于组件暴露的数据 el-table-column组件已经写好了table-column
        内部<slot :row="item"><slot> -->
          <!-- row是隐藏代码已经定义好了 -->
        <el-table-column prop="date" label="状态">
          <!-- 作用域插槽slot-scope固定写法 -->
          <template slot-scope="scope">
            <!-- {{scope.row}} -->
            <!-- mg_state后台返回的数据 -->
            <el-switch
              v-model="scope.row.mg_state"
              active-color="#13ce66"
              @change="switchChange(scope.row)"
              inactive-color="#ff4949">
            </el-switch>
            <!-- switchChange(scope.row)拿到这一行的状态，item会拿到这一行所有状态 -->
          </template>
        </el-table-column>
                <el-table-column prop="date" label="操作" width="200">
                  <!-- slot-scope="scope  作用域插槽，scope随便起的名字 -->
                  <template slot-scope="scope">
                <!-- 包裹元素 -->
                <!-- 编辑功能 -->
                <el-button  type="primary" @click="edit (scope.row)" icon="el-icon-edit" size="mini" >
              </el-button>
              <!-- 删除按钮 -->
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUser(scope.row.id)"></el-button>
                <!-- 文字提示 -->
                <!-- 设置按钮 -->
              <el-tooltip  class="item" effect="dark" content="分配角色" placement="top">
                <el-button @click="showSetRoles(scope.row)" type="warning" icon="el-icon-setting" size="mini" ></el-button>
              </el-tooltip>
               </template>
              </el-table-column>
      </el-table>
      <!-- 分页功能 -->
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryData.pagenum"
      :page-sizes="[2, 4, 10, 20]"
      :page-size="queryData.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
      <!-- queryData.pagenum当前所在的页码数queryData.pagesize下面显示有几页total="total显示几条数据 -->
    </el-pagination>
    </el-card>
    <!-- 添加对话框  -->
    <!-- 添加信息框区域 -->
     <!-- @close注册事件 -->
     <!-- :visible.sync我当前的状态是显示还是隐藏 值是布尔值-->
    <el-dialog
      @close="dialoClose"
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="50%"
      center>
      <!-- :rules固定的属性 -->
      <!-- 添加用户 -->
      <!-- :rules="rules 是校验规则"  :model是绑定定义所有数据-->
        <el-form ref="addUserFormRef" :rules="rules"  :model="addUserForm" label-width="80px">
          <el-form-item  label="用户名">
          <el-input v-model="addUserForm.username"></el-input>
          </el-form-item>
          <el-form-item  label="密码">
            <el-input v-model="addUserForm.password"></el-input>
          </el-form-item>
          <el-form-item  label="邮箱">
            <el-input v-model="addUserForm.email"></el-input>
          </el-form-item>
          <el-form-item  label="手机">
            <el-input v-model="addUserForm.mobile"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click= "submitAddFrom" >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改用户对话框  编辑信息区域  :model绑定的数据-->
  <el-dialog  @close="edituse"  title="提示" :visible.sync="editDialogVisible" width="50%">
     <el-form label-width="80px" :model="editUserForm" ref='editUserForm' :rules="editUserRules">
        <el-form-item label="用户名:" >
          <el-input disabled v-model="editUserForm.username"></el-input>
        </el-form-item>
        <el-form-item label="手机:" prop="mobile">
          <el-input v-model="editUserForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="editUserForm.email"></el-input>
        </el-form-item>
      </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="editDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submituser">确 定</el-button>
    </span>
  </el-dialog>
  <!-- 分配角色对话框 -->
  <el-dialog
  @close="closemuit"
  title="分配角色"
  :visible.sync="setRolesdialogVisible"
  width="50%">
  <p>当前的用户:{{currentUsef.username}}</p>
  <p>当前的角色:{{currentUsef.role_name}}</p>
  <!-- currentUsef这个也有疑问也要问 -->
  <!-- selectValue 这点不懂要问 在data中定义-->
  <div>
    分配新角色：
    <el-select v-model="selectValue" placeholder="请选择">
<!-- 我后台有多少条数据，就展示多少 -->
    <el-option
      v-for="item in roles"
      :key="item.id"
      :label="item.roleName"
      :value="item.id">
      <!-- 把获得的id拿到  id是唯一的 -->
    </el-option>
    <!-- label显示页面的属性 -->
  </el-select>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="setRolesdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitSetRoles">确 定</el-button>
  </span>
</el-dialog>

</div>
</template>
<script>
export default {
  data () {
    const checkEmail = (rule, value, callback) => {
      const reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
      // reg.test匹配正则固定用法
      if (reg.test(value)) {
        return callback()
      }
      return callback(new Error('邮箱规则不合法'))
    }
    const Mobile = (rule, value, callback) => {
      const reg = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/
      // reg.test匹配正则固定用法
      if (reg.test(value)) {
        return callback()
      }
      return callback(new Error('手机规则不合法'))
    }
    return {
      queryData: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      // 接受用户列表数据（我接收后台返回来的数据存到我自己data数据自己起的名字，
      // 因为没有办法直接渲染到页面，data里的数据可以渲染到页面）
      // 接收后台返回来的数据
      // 后台返回用户列表的数据
      // 双向数据绑定拿到我
      selectValue: '',
      users: [],
      // 接收信息条数
      total: 0,
      roles: [],
      // 添加用户框的状态，false是关闭的状态
      addDialogVisible: false,
      addUserForm: {
        username: '周深',
        password: '123456',
        email: 'kk@qq.com',
        mobile: 13838260202
      },
      rules: {
        username: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { validator: Mobile, trigger: 'blur' }
        ]
      },
      // 修改对话框的状态
      editDialogVisible: false,
      // 当前的用户信息
      setRolesdialogVisible: false,
      currentUsef: {},
      // 空数组返回的数组
      // 初始编辑页面的状态
      editUserForm: {
        username: 'qwe',
        mobile: 'qwe',
        email: 'qe'
      },
      editUserRules: {
        email: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { validator: Mobile, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      const { data: res } = await this.$axios.get('users', {
        params: this.queryData
        // this.queryData给后台传递参数的数据
      })
      if (res.meta.status !== 200) return this.$message.error('获取消息失败')
      this.users = res.data.users
      // 后台返回的数据，没办法直接渲染页面，需要存到data，data数据可以渲染到页面里
      // total多少条数据
      this.total = res.data.total
      console.log(res)
    },
    // 选择了每页的条数，当我们点击选择页数，就会出现几条页面 val内部给我们封装好的
    handleSizeChange (val) {
      this.queryData.pagesize = val
      this.getUserList()
    },
    // 更改了页码的值，当鼠标点击页面动态出现几条数据 里边会内置了一个参数val，当前页码值
    handleCurrentChange (val) {
      this.queryData.pagenum = val
      this.getUserList()
    },
    // 增删改查的改
    async switchChange (item) {
      // 拿到data数据并重新起名叫res，对象解构
      const { data: res } = await this.$axios.put(`users/${item.id}/state/${item.mg_state}`)
      if (res.meta.status !== 200) {
        this.$message.error('修改失败')
        item.mg_state = !item.mg_state
        return
      }
      this.$message.success('修改成功')
    },
    // 对话框被关闭resetFields()内置的重置表单方法
    dialoClose () {
      // 拿到了form表单组件，然后form表单内置了重置了整个表单
      this.$refs.addUserFormRef.resetFields()
    },
    submitAddFrom () {
      // 增加数据，增删改查的增，点击确定的时候向后台发起请求
      // 重置
      // 会传来一个布尔值
      // validate里边内置有个回调函数，会传入是否校验通过返回会布尔值
      this.$refs.addUserFormRef.validate(async flag => {
        if (!flag) return
        // 把我当前填的表单数据给后台
        const { data: res } = await this.$axios.post('users', this.addUserForm)
        if (res.meta.status !== 201) return this.$message.error('创建失败')
        this.$message.success('创建成功')
        this.addDialogVisible = false
        this.getUserList()
      })
    },
    edit (item) {
      // 我item形参接收的scope.row传过来这一行的数据，把当前的数据给editUserForm，:model绑定了当前表单会拿到当前表单的数据editUserForm
      this.editUserForm = item
      this.editDialogVisible = true
      // 让我对话框显示
    },
    edituse () {
      // 重置表单
      this.$refs.editUserForm.resetFields()
    },
    submituser () {
      // validate form表单内置的对表单将进行校验规则可以提交
      this.$refs.editUserForm.validate(async flag => {
        if (!flag) return
        // 他需要editUserForm里面的参数
        const { data: res } = await this.$axios.put('users/' + this.editUserForm.id, {
          email: this.editUserForm.email,
          mobile: this.editUserForm.mobile
        })
        if (res.meta.status !== 200) return this.message.error('更新数据失败')
        this.$message.success('更新数据成功')
        // 关闭对话框
        this.editDialogVisible = false
        this.getUserList()
      })
    },
    // 删，增删改查的删
    // 删除功能
    // （我们需要用到用户列表的数据来进行删除功能，所以携带id是用户列表的id）
    removeUser (id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 把我当前的id传给后台
        const { data: res } = await this.$axios.delete('users/' + id)
        if (res.meta.status !== 200) return this.$message.error('删除数据失败')
        this.$message.success('删除成功')
        // 需要重新刷新页面，调用
        this.getUserList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async showSetRoles (row) {
      this.setRolesdialogVisible = true
      this.currentUsef = row
      const { data: res } = await this.$axios.get('roles')
      if (res.meta.status !== 200) return this.$message.error(('获取失败'))
      this.rights = res.data
      // 拿到角色的id
      this.roles = res.data
    },
    async submitSetRoles () {
      if (this.selectValue === '') return this.$message.error('亲情选择哟')
      const { data: res } = await this.$axios.put('users/' + this.currentUsef.id + ' /role', {
        rid: this.selectValue
      })
      if (res.meta.status !== 200) return this.$message.error('设置失败')
      this.setRolesdialogVisible = false
      this.$message.success('分配成功')
    },
    // 关闭对话框
    closemuit () {
      this.selectValue = ''
    }
  }
}
</script>

<style scoped lang='less'>

</style>
